<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>Document</title>
  <!-- 引入JQ CDN外部链接-->
  <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  <!-- 引入layui css -->
  <link rel="stylesheet" href="http://unpkg.com/layui@2.6.8/dist/css/layui.css" />


  <!-- 引入layui JS -->
  <script src="http://unpkg.com/layui@2.6.8/dist/layui.js"></script>


</head>

<style>
  #boxone {
    width: 400px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 250%;
    transform: translate(-50%, -50%);
    background-color: rgba(8, 8, 8, 0.748);
    text-align: center;
    display: none;
  }

  #update {
    width: 400px;
    height: 400px;

    color: #fff;
    position: absolute;
    left: 50%;
    top: 335%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.357);
    display: none;
    text-align: center;
  }

  #div2 {
    display: none;
  }

  #detail_One {
    width: 400px;
    height: 300px;
    position: absolute;
    left: 50%;
    color: #fff;
    top: 350%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.632);
    text-align: center;
    display: none;
  }
</style>

<body>
  <div class="layui-layout layui-layout-admin">
    <div class="layui-header">
      <div class="layui-logo layui-hide-xs layui-bg-black">布局演示</div>
      <!-- 添加 -->
      <div id="boxone">
        账号：
        <div class="layui-input-inline">
          <input type="text" name="password" required lay-verify="required" placeholder="账号" autocomplete="off"
            class="layui-input" id="Name_one" />
        </div>

        <br />
        <br />

        密码：
        <div class="layui-input-inline">
          <input type="password" name="password" required lay-verify="required" placeholder="密码" autocomplete="off"
            class="layui-input" id="password" />
        </div>
        <br />
        <br />
        验证码：
        <div class="layui-input-inline">
          <input type="text" name="password" required lay-verify="required" placeholder="验证码" autocomplete="off"
            class="layui-input" id="Verification" />
          <br />
          <br />
          <span><img src="" alt="" id="code" class="yan" width="70%" /></span>
        </div>
        <br /><br />

        <button class="layui-btn layui-btn-radius" id="Add_two">添加</button>
        <button class="layui-btn layui-btn-radius" id="Shut_down">
          关闭
        </button>
      </div>

      <!-- 更新 -->

      <div id="update">
        ID：
        <div class="layui-input-inline">
          <input type="text" name="password" required lay-verify="required" placeholder="ID" autocomplete="off"
            class="layui-input" id="Password_one" />
        </div>
        <br />
        <br />
        账号：
        <div class="layui-input-inline">
          <input type="text" name="password" required lay-verify="required" placeholder="账号" autocomplete="off"
            class="layui-input" id="sex" />
        </div>

        <br />
        <br />
        密码：
        <div class="layui-input-inline">
          <input type="text" name="password" required lay-verify="required" placeholder="密码" autocomplete="off"
            class="layui-input" id="age" />
        </div>
        <br />
        <br />
        <select id="province">
          <option value="Tianjin">Tianjin</option>
          <option value="Beijing">Beijing</option>
          <option value="Henan">Henan</option>
        </select>
        <select id="city">
          <option value="F5">F5</option>
          <option value="F12">F12</option>
          <option value="F11">F11</option>
        </select>
        <select id="area">
          <option value="small japan">small japan</option>
          <option value="U.S.">U.S.</option>
          <option value="Southeast Asia">Southeast Asia</option>
        </select>
        <br /><br />
        地址：
        <div class="layui-input-inline">
          <input type="text" name="password" required lay-verify="required" placeholder="确认地址" autocomplete="off"
            class="layui-input" id="detail_address" />
        </div>
        <br /><br />
        <!-- 上传头像 -->
        <button type="button" class="layui-btn" id="test1">
          <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
        <button class="layui-btn layui-btn-radius" id="Add_three">
          更新
        </button>
        <button class="layui-btn layui-btn-radius" id="Close_three">
          关闭
        </button>
      </div>

      <!-- 详情 -->

      <div id="detail_One">
        头像：<img src="" alt="" class="spa8" style="width: 50px" />
        <h2>用户名: <span class="spa0"></span></h2>
        <br />

        <h2>账号: <span class="spa2"></span></h2>
        <br />
        <h2>年龄: <span class="spa3"></span></h2>
        <br />

        <h2>确认地址: <span class="spa7"></span></h2>
        <br />

        <button class="layui-btn layui-btn-radius" id="Close_four">❌</button>
      </div>

      <!-- 头部区域（可配合layui 已有的水平导航） -->
      <ul class="layui-nav layui-layout-left">
        <!-- 移动端显示 -->
        <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
          <i class="layui-icon layui-icon-spread-left"></i>
        </li>

        <li class="layui-nav-item layui-hide-xs"><a href="">导航 1</a></li>
        <li class="layui-nav-item layui-hide-xs"><a href="">导航 2</a></li>
        <li class="layui-nav-item layui-hide-xs"><a href="">导航 3</a></li>
        <li class="layui-nav-item">
          <a href="#">导航组</a>
          <dl class="layui-nav-child">
            <dd><a href="">菜单 11</a></dd>
            <dd><a href="">菜单 22</a></dd>
            <dd><a href="">菜单 33</a></dd>
          </dl>
        </li>
      </ul>
      <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item layui-hide layui-show-md-inline-block">
          <a href="#">
            <i class="layui-icon layui-icon-set-fill"></i>
          </a>
          <dl class="layui-nav-child">
            <dd><a href="">你个人资料</a></dd>
            <dd><a href="">设置</a></dd>
            <dd><a href="">退出</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
          <a href="#">
            <i class="layui-icon layui-icon-more-vertical"></i>
          </a>
        </li>
      </ul>
    </div>

    <div class="layui-side layui-bg-black">
      <div class="layui-side-scroll">
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
          <li class="layui-nav-item layui-nav-itemed">
            <a class="sou" href="#">首页</a>
          </li>
          <li class="layui-nav-item">
            <a href="#" class="lie">列表</a>
          </li>
          <li class="layui-nav-item"><a href="#">单击菜单项</a></li>
          <li class="layui-nav-item"><a href="#">链接</a></li>
        </ul>
      </div>
    </div>

    <div class="layui-body">
      <!-- 内容主体区域 -->
      <div id="div1">
        <h1 class="name">

          姓: <span></span>
          <br>
          用户名：<input type="text" name="" id="">
          <br>

          注册时间： <input type="text" class="shi">
          <br>
          <form>
            地区
            <select class="cheng">
              <option value="1">城市1</option>
              <option value="2">城市2</option>
              <option value="3">城市3</option>
              <option value="4">城市4</option>
              <option value="5">城市5</option>
            </select>
          </form>
          <br>
          点击框 <input type="radio" value="1" class="xing">男 <input type="radio" value="2" class="xing">女
          <br>
          <br>
          <br>
          <button class="gen">立即提交</button>
          <button>重置</button>
        </h1>
      </div>

      <div class="layui-form-item" id="div2">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-inline">
          <input type="text" name="password" required lay-verify="required" placeholder="请输入你的账号" autocomplete="off"
            class="layui-input" id="name" />
        </div>

        <button class="layui-btn layui-btn-radius" id="Search">搜索</button>
        <button class="layui-btn layui-btn-radius" id="Add_to">添加</button>

        <table class="layui-table">
          <thead>
            <th>列表</th>
            <th>账号</th>
            <th>img头像</th>
            <th>登录时间</th>
            <th>注册时间</th>
            <th>操作</th>
          </thead>
          <tbody id="tbo"></tbody>
        </table>
      </div>

      <div class="layui-footer">
        <div id="demo1">123</div>
      </div>
    </div>
  </div>
</body>
<script>
  layui.use(["element", "layer", "util"], function () {
    var element = layui.element,
      layer = layui.layer,
      util = layui.util,
      $ = layui.$;

    //头部事件
    util.event("lay-header-event", {
      //左侧菜单事件
      menuLeft: function (othis) {
        layer.msg("展开左侧菜单的操作", {
          icon: 0,
        });
      },
      menuRight: function () {
        layer.open({
          type: 1,
          content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
          area: ["260px", "100%"],
          offset: "rt", //右上角
          anim: 5,
          shadeClose: true,
        });
      },
    });
  });

  $(".sou").click(function () {
    $("#div2").css("display", "none");
    $("#div1").css("display", "block");
  });

  $(".lie").click(function () {
    $("#div2").css("display", "block");
    $("#div1").css("display", "none");
  });

  var add = localStorage.getItem("res")
    ? JSON.parse(localStorage.getItem("res"))
    : [];

  $(".name span").html(add.name);

  //分页
  fun1();

  function fun1() {
    $.ajax({
      type: "get",
      url: "https://api.zzgoodqc.cn/api/user?page=1&limit=1000",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${add.Authorization}`,
      },
      dataType: "json",
      success: function (res) {
        console.log(res.data.length);
        layui.use(["laypage", "layer"], function () {
          var laypage = layui.laypage,
            layer = layui.layer;
          laypage.render({
            elem: "demo1",
            count: res.data.length, //数据总数
            jump: function (obj) {
              fun(obj.curr);
            },
          });
        });
      },
    });
  }

  function fun(i) {
    $.ajax({
      type: "get",
      url: `https://api.zzgoodqc.cn/api/user?page=${i}&limit=15`,
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${add.Authorization}`,
      },
      dataType: "json",
      success: function (res) {
        if (res.code == 200) {
          let add = "";
          for (let i in res.data) {
            add += `<tr>
                        <th>${res.data[i].id}</th>
                        <th>${res.data[i].username}</th>
                        <th><img src="${res.data[i].img}" alt=""></th>
                        <th>${res.data[i].created_at}</th>
                        <th>${res.data[i].updated_at}</th>
                        <th><a href="#" onclick="Delete(${res.data[i].id})">删除</a> | <a href="#" onclick="detail(${res.data[i].id})">详情</a> | <a href="#" onclick="update(${res.data[i].id})">更新</a></th>

                        </tr>`;
          }
          $("#tbo").html(add);
        } else {
          window.location.href = "./8.11.Sign in.html";
        }
      },
    });
  }
  // 上传图片
  var image = "";
  layui.use("upload", function () {
    var upload = layui.upload;

    //执行实例
    var uploadInst = upload.render({
      elem: "#test1", //绑定元素
      url: "https://api.zzgoodqc.cn/api/upload", //上传接口
      done: function (res) {
        image = res.data.src;
      },
      error: function () {
        console.log("上传失败");
      },
    });
  });

  //  更新
  function update(i) {
    $("#update").css("display", "block");
    var arr = i;
    $("#Add_three").click(function () {
      $.ajax({
        url: `https://api.zzgoodqc.cn/api/user/${arr}`,
        type: "PUT",
        headers: {
          Authorization: `Bearer ${add.Authorization}`,
        },
        data: {
          password: $("#Password_one").val(),
          sex: $("#sex").val(),
          age: $("#age").val(),
          province: $("#province").val(),
          city: $("#city").val(),
          area: $("#area").val(),
          detail_address: $("#detail_address").val(),
          img: image,
        },
        dataType: "json",
        success: function (res) {
          alert(res.message);
          fun1();
          arr = null;
          image = null;
        },
      });
    });
  }

  $("#Close_three").click(function () {
    $("#update").css("display", "none");
  });

  //  详情
  function detail(i) {
    $("#detail_One").css("display", "block");
    let arr = i;
    $.ajax({
      type: "get",
      url: `https://api.zzgoodqc.cn/api/user/${arr}`,
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${add.Authorization}`,
      },
      dataType: "json",
      success: function (res) {
        console.log(res.data.img);
        $(".spa0").html(res.data.username);
        $(".spa1").html(res.data.password);
        $(".spa2").html(res.data.sex);
        $(".spa3").html(res.data.age);
        $(".spa4").html(res.data.province);
        $(".spa5").html(res.data.city);
        $(".spa6").html(res.data.area);
        $(".spa7").html(res.data.detail_address);
        $(".spa8").attr("src", res.data.img);
      },
    });
  }

  $("#Close_four").click(function () {
    $("#detail_One").css("display", "none");
  });

  //  添加
  $("#Add_two").click(function () {
    $.ajax({
      type: "post",
      url: "https://api.zzgoodqc.cn/api/user",
      dataType: "json",
      data: {
        username: $("#Name_one").val(),
        password: $("#password").val(),
        captcha: $("#Verification").val(),
        "key": key,
      },
      success: function (res) {
        alert(res.message);
        fun1();
      },
    });
  });

  $("#Shut_down").click(function () {
    $("#boxone").css("display", "none");
  });

  //  删除
  function Delete(i) {
    let arr = i;
    $.ajax({
      type: "DELETE",
      url: `https://api.zzgoodqc.cn/api/user/${arr}`,
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${add.Authorization}`,
      },
      dataType: "json",
      success: function (res) {
        alert(res.message);
        fun1();
        arr = null;
      },
    });
  }

  //  搜索
  var key = "";
  $("#Search").click(function () {
    $.ajax({
      type: "get",
      url: "https://api.zzgoodqc.cn/api/searchUser?page=1&limit=100",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${add.Authorization}`,
      },
      data: {
        key: $("#name").val(),
      },
      dataType: "json",
      success: function (res) {
        let add = "";
        for (let i in res.data) {
          add += `<tr>
                        <th>${res.data[i].id}</th>
                        <th>${res.data[i].username}</th>
                        <th><img src="${res.data[i].img}" alt=""></th>
                        <th>${res.data[i].created_at}</th>
                        <th>${res.data[i].updated_at}</th>
                        <th><a href="#" onclick="Delete(${res.data[i].id})">删除</a> | <a href="#" onclick="detail(${res.data[i].id})">详情</a> | <a href="#" onclick="update(${res.data[i].id})">更新</a></th>
                        </tr>`;
        }
        $("#tbo").html(add);
      },
    });
  });

  $("#Add_to").click(function () {
    $("#boxone").css("display", "block")
    ser();
  });

  $("#code").click(ser);

  function ser() {
    $.ajax({
      type: "get",
      url: "https://api.zzgoodqc.cn/api/captcha",
      dataType: "json",
      success: function (res) {
        $(".yan").attr("src", res.data.img);
        key = res.data.key;
      },
    });
  }

  $('.gen').click(function(){
    console.log($('.shi').val(),$('.cheng').val(),$('.xing').val());
  })
</script>

</html>